<template>
    <div class="container-box">
        <CommonCrud ref="crudRef" @search="handleSearch">
            <!-- 工具栏按钮 -->
            <template #table-header>
                <el-button v-permission="'system:Dict:add'" type="primary" @click="handleAdd">
                    新增
                </el-button>
            </template>
            <template #search-form="{ searchForm }">
                <el-form-item label="用户名">
                    <el-input v-model="searchForm.username" placeholder="请输入用户名" />
                </el-form-item>
            </template>

            <el-table-column prop="name" label="字典名称" />

            <el-table-column prop="description" label="字典描述" />

            <el-table-column prop="items" label="" />

            <el-table-column prop="status" label="状态" />

            <el-table-column prop="createdAt" label="" />

            <el-table-column prop="updatedAt" label="" />

            <template #operation="{ row }">
                <el-button v-permission="'system:Dict:edit'" link type="primary" @click="handleEdit(row)">
                    编辑
                </el-button>
                <el-button v-permission="'system:Dict:del'" link type="danger" @click="handleDelete(row)">
                    删除
                </el-button>
            </template>
        </CommonCrud>
        <CommonDialog v-model="dialogVisible" :title="title" width="500px" @confirm="handleSubmit"
            @cancel="handleDialogClose" @close="handleDialogClose">
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">

                <el-form-item label="字典名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入字典名称" />
                </el-form-item>
                <el-form-item label="字典描述" prop="description">
                    <el-input v-model="formData.description" placeholder="请输入字典描述" />
                </el-form-item>
                <el-form-item label="" prop="items">
                    <el-input v-model="formData.items" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-input v-model="formData.status" placeholder="请输入状态" />
                </el-form-item>
                <el-form-item label="" prop="createdAt">
                    <el-input v-model="formData.createdAt" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="" prop="updatedAt">
                    <el-input v-model="formData.updatedAt" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </CommonDialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import type { FormInstance } from "element-plus"
import CommonCrud from "@/components/CommonCrud/index.vue"
import {
    getDictList,
    addDict,
    editDict,
    deleteDict,
} from "@/api/Dict"
import { ElMessage, ElMessageBox } from "element-plus"
const crudRef = ref()
const dialogVisible = ref(false)
const title = ref("")
const formRef = ref()
const formData = ref({
})

// 表单校验规则
const rules = {
    name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
    description: [{ required: true, message: "请输入字典描述", trigger: "blur" }],
    items: [{ required: true, message: "请输入", trigger: "blur" }],
    status: [{ required: true, message: "请输入状态", trigger: "blur" }],
}
// 查询
const handleSearch = async (params: any) => {
    crudRef.value.loading = true
    try {
        const res: any = await getDictList(params)
        if (res.code === 200) {
            crudRef.value.tableData = res.data.data
            crudRef.value.total = res.data.total
        }
    } finally {
        crudRef.value.loading = false
    }
}
// 提交表单
const handleSubmit = async () => {
    if (title.value === "新增") {
        const res = await addDict(formData.value)
        if (res.code === 200) {
            ElMessage.success("添加成功")
            crudRef.value.handleSearch()
            handleDialogClose()
        }
    } else if (title.value === "编辑") {
        const res = await editDict(formData.value.id, formData.value)
        if (res.code === 200) {
            ElMessage.success("保存成功")
            crudRef.value.handleSearch()
            handleDialogClose()
        }
    }
}
// 关闭弹窗
const handleDialogClose = () => {
    dialogVisible.value = false
    formRef.value.resetFields()
}
// 编辑
const handleEdit = (row) => {
    dialogVisible.value = true
    title.value = "编辑"
    formData.value = { ...row }
}
// 新增
const handleAdd = () => {
    dialogVisible.value = true
    title.value = "新增"
}
// 删除
const handleDelete = async (row) => {
    ElMessageBox.confirm("确定要删除吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            const res = await deleteDict(row.id)
            if (res.code === 200) {
                ElMessage.success("删除成功")
                crudRef.value.handleSearch()
            }
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "删除取消",
            })
        })
}


onMounted(() => {
    handleSearch({})
})
</script>

<style scoped lang="scss"></style>